<template>
	<view class="menu" :class="{show}">
		<view class="items flex-row">
			<view @tap="chooseImage" class="item flex-column">
				<text class="iconfont icon-album"></text>
				<text class="text">相册</text>
			</view>
			<view @tap="camera" class="item flex-column">
				<text class="iconfont icon-camera"></text>
				<text class="text">相机</text>
			</view>
			<view @tap="chooseVideo" class="item flex-column">
				<text class="iconfont icon-video"></text>
				<text class="text">视频</text>
			</view>
			<view @tap="chooseFile" class="item flex-column">
				<text class="iconfont icon-folder-filled"></text>
				<text class="text">文件</text>
			</view>
		</view>
		<view class="items flex-row">
			<view @tap="chooseGoods" class="item flex-column">
				<text class="iconfont icon-goods"></text>
				<text class="text">商品</text>
			</view>
			<view @tap="chooseLocation" class="item flex-column">
				<text class="iconfont icon-position"></text>
				<text class="text">位置</text>
			</view>
			<view class="item placeholder"></view>
			<view class="item placeholder"></view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
const emit = defineEmits(['success'])
const props = defineProps({
	show: { type: Boolean, default: false }
})

// 选择商品
function chooseGoods() {
	/**
	 * 演示demo使用静态数据模拟商品数据
	 * 实际开发中，可以根据需求设计实现
	 */
	callback('card', {
		title: '儿童帽子防紫外线夏宝宝遮阳太阳帽大帽檐男女童亲子防晒帽渔夫帽',
		summary: '<b style="color:red;font-size:14px;margin-right:5px;">￥168.00</b><span style="font-size:12px;color:#999">￥268.00</span>',
		href: 'https://chat.xiangbaicheng.com/doc',
		imageUrl: 'https://img2.baidu.com/it/u=594912624,939521262&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500',
	})
}

// 选择位置
function chooseLocation() {
	callback('location', {
		longitude: 106.616885,
		latitude: 29.560036,
		address: '重庆市南岸区崇文路高山流水东北侧',
		name: '重庆南山风景区',
	})
	
	// 请自行配置相关地图key，demo时仅取延时数据
	// uni.chooseLocation({
	// 	success(res){
	// 		// let { longitude, latitude, address, name } = res
	// 		callback('location', {
	// 			longitude: 106.616885,
	// 			latitude: 29.560036,
	// 			address: '重庆市南岸区崇文路高山流水东北侧',
	// 			name: '重庆南山风景区',
	// 		})
	// 	}
	// })
}

// 选择文件
function chooseFile() {
	// #ifndef H5
	uni.showToast({
		icon: 'none',
		title: '功能开发中'
	})
	// #endif
	
	// #ifdef H5
	uni.chooseFile({
		count: 1,
		success(res) {
			/**
			 * 此处为防止服务器资源被占用，demo时固定的一个文档地址，体验上传效果可前往pc的demo
			 * 实际开发中应该将选择的文件上传到服务器，并返回可访问的文档url地址
			 */
			const url = 'https://cdn.xiangbaicheng.com/public/这是一个测试文档.docx'
			callback('file', { url })
		}
	})
	// #endif
}

// 选择视频
function chooseVideo() {
	uni.chooseVideo({
		success(res){
			/**
			 * 此处为防止服务器资源被占用，demo时固定的一个视频地址，体验上传效果可前往pc的demo
			 * 实际开发中应该将选择的视频上传到服务器，并返回可访问的图片url地址
			 */
			const url = 'https://cdn.xiangbaicheng.com/public/media/mov.mp4'
			callback('video', { url })
		}
	})
}

// 拍照
function camera() {
	uni.chooseImage({
		sourceType: ['camera'],
		success(res) {
			/**
			 * 此处为防止服务器资源被占用，demo时固定的一个图片地址，体验上传效果可前往pc的demo
			 * 实际开发中应该将选择的文件上传到服务器，并返回可访问的图片url地址
			 */
			const url = 'https://img2.baidu.com/it/u=594912624,939521262&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500'
			callback('image', { url })
		}
	})
}

// 选择照片
function chooseImage() {
	uni.chooseImage({
		sourceType: ['album'],
		success(res) {
			/**
			 * 此处为防止服务器资源被占用，demo时固定的一个图片地址，体验上传效果可前往pc的demo
			 * 实际开发中应该将选择的文件上传到服务器，并返回可访问的图片url地址
			 */
			const url = 'https://img0.baidu.com/it/u=600722015,3838115472&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750'
			callback('image', { url })
		}
	})
}

// 回调
function callback(type: string, data: object) {
	emit('success', { type, data })
}
</script>

<style lang="scss" scoped>
.menu {
	opacity: 0;
	padding: 24rpx 0 0 30rpx;
	transition: opacity 0.2s ease;
	
	&.show {
		opacity: 1;
	}
	
	.items {
		justify-content: space-around;
		
		.item{
			margin: 0 40rpx 40rpx 0;
			background: #fff;
			border-radius: 10rpx;
			@include fullsize(110rpx);
			
			&.placeholder {
				background: transparent;
			}
			
			.iconfont {
				color: #555;
				font-size: 50rpx;
			}
			
			.text {
				color: #333;
				font-size: 24rpx;
			}
		}
	}
}
</style>